/* 颜色变量 */
$primary-color: #24C690;
$text-color: #000000;
$text-color-secondary: #89807A;
$background-color: #FFFFFF;
$background-color-secondary: #F0F0F0;

/* 字体大小 */
$font-size-xs: 10px;
$font-size-sm: 12px;
$font-size-base: 14px;
$font-size-lg: 16px;
$font-size-xl: 18px;
$font-size-2xl: 20px;
$font-size-3xl: 24px;
$font-size-4xl: 32px;

/* 间距 */
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-base: 16px;
$spacing-lg: 24px;
$spacing-xl: 32px;

/* 圆角 */
$border-radius-sm: 8px;
$border-radius-base: 16px;
$border-radius-lg: 24px;
$border-radius-full: 9999px;

/* 阴影 */
$shadow-sm: 0px 2px 8px rgba(0, 0, 0, 0.05);
$shadow-base: 0px 4px 20px rgba(0, 0, 0, 0.08);
$shadow-lg: 0px 8px 32px rgba(0, 0, 0, 0.12);

/* 过渡动画 */
$transition-base: all 0.3s ease;

/* 混合器 */
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@mixin flex-column {
  display: flex;
  flex-direction: column;
}

@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 响应式断点 */
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;

/* 媒体查询混合器 */
@mixin respond-to($breakpoint) {
  @if $breakpoint == sm {
    @media (min-width: $breakpoint-sm) { @content; }
  }
  @else if $breakpoint == md {
    @media (min-width: $breakpoint-md) { @content; }
  }
  @else if $breakpoint == lg {
    @media (min-width: $breakpoint-lg) { @content; }
  }
  @else if $breakpoint == xl {
    @media (min-width: $breakpoint-xl) { @content; }
  }
} 